<template>
  <div class="btns">
    <van-space>
      <van-button
        v-if="item.state === 1"
        size="small"
        type="primary"
        @click="handleApprove"
      >
        审批
      </van-button>
      <van-button
        v-if="item.state === 2"
        size="small"
        type="primary"
        @click="handleDispatch"
      >
        调度
      </van-button>

      <van-button
        v-if="item.state === 7"
        size="small"
        type="primary"
        @click="handleChangeMil"
      >
        里程修改
      </van-button>
      <van-button
        v-if="[1, 2, 5].includes(item.state)"
        size="small"
        type="primary"
        @click="handleBack"
      >
        取消
      </van-button>

      <van-button
        v-if="item.state === '未结算'"
        size="small"
        type="primary"
        @click="handleEnd(item)"
      >
        结算
      </van-button>
    </van-space>
  </div>
</template>

<script lang="ts" setup>
  import { withDefaults, defineEmits, defineProps } from 'vue';
  import { showConfirmDialog, showSuccessToast } from 'vant';
  import { apiCacleTask } from '@/api/dispatch';
  import { apiMutiOpeateBill } from '@/api/finance';

  import ModalApprove from '../ModalApprove/index';
  import ModalDispatch from '../ModalDispatch/index';
  import ModalChangeMil from '../ModalChangeMil/index';

  interface Props {
    item: any;
  }
  const props = withDefaults(defineProps<Props>(), {});
  const emit = defineEmits(['onHandleSuccess']);

  const handleApprove = () => {
    ModalApprove({
      id: props.item.id,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleDispatch = () => {
    ModalDispatch({
      id: props.item.id,
      orderId: props.item.id,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleChangeMil = () => {
    ModalChangeMil({
      id: props.item.id,
      billType: props.item.bill_type,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleBack = () => {
    showConfirmDialog({
      title: '提示',
      message: '确定取消吗？',
      beforeClose(action) {
        return new Promise<boolean>((resolve, reject) => {
          if (action === 'confirm') {
            apiCacleTask({
              id: props.item.id,
              order_id: props.item.id,
            })
              .then(() => {
                showSuccessToast('取消成功！');
                emit('onHandleSuccess');
                resolve(true);
              })
              .catch(() => {
                resolve(false);
              });
          } else {
            resolve(true);
          }
        });
      },
    });
  };

  const handleEnd = (item) => {
    showConfirmDialog({
      title: '提示',
      message: '确定结算？',
      beforeClose(action) {
        return new Promise<boolean>((resolve, reject) => {
          if (action === 'confirm') {
            apiMutiOpeateBill([item.id])
              .then(() => {
                showSuccessToast('结算成功');
                emit('onHandleSuccess');
                resolve(true);
              })
              .catch(() => {
                resolve(false);
              });
          } else {
            resolve(true);
          }
        });
      },
    });
  };
</script>

<style lang="less" scoped>
  .btns {
    padding: 20px;
    text-align: right;
  }
</style>
